<template>
	<view class="information">
		<view class="infor_attr">
			<view class="infor_attr_img">
				<image src="../../static/image/memberCenter/attr.png" mode=""></image>
			</view>
			<view class="infor_add">
				<image src="../../static/image/memberCenter/icon_add.svg" mode=""></image>
			</view>
		</view>
		<view class="infor_content">
			<view class="infor_content_title">
				个人资料
			</view>
		</view>
		<view class="infor_form">
			<view class="infor_form_item infor_name">
				<view class="infor_form_hd">
					<view class="info_label">
						性别
					</view>
					<view class="info_edit">
						<image src="../../static/image/memberCenter/Edit.svg" mode=""></image>
						编辑
					</view>
				</view>
				<view class="infor_form_bd">
					<input type="text" placeholder="请输入昵称" placeholder-class="placeholder" v-model="member.name">
				</view>
			</view>
			<view class="infor_form_item infor_phone">
				<view class="infor_form_hd">
					<view class="info_label">
						手机号
					</view>
				</view>
				<view class="infor_form_bd">
					<input type="text" placeholder="请输入手机号" placeholder-class="placeholder" v-model="member.phone">
					<image src="../../static/image/memberCenter/verify.svg" mode=""></image>
				</view>
			</view>
			<view class="infor_form_item infor_sex">
				<view class="infor_form_hd">
					<view class="info_label">
						性别
					</view>
				</view>
				<view class="infor_form_bd">
					<label class="radio"><radio value="1" :checked="member.sex === 1" color="#2588FF" @tap="member.sex = 1"/>男</label>
					<label class="radio"><radio value="2" :checked="member.sex === 2" color="#2588FF" @tap="member.sex = 2"/>女</label>
					<label class="radio"><radio value="0" :checked="member.sex === 0" color="#2588FF" @tap="member.sex = 0"/>保密</label>
				</view>
			</view>
			<view class="infor_btns">
				<view class="infor_back" @tap="backref()">
					返回
				</view>
				<view class="infor_save">
					<image src="../../static/image/memberCenter/save.svg" mode=""></image>
					保存
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				member:{
					name:'小恐龙',
					phone:'15700008888',
					sex:1
				}
			};
		},
		methods:{
			backref() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f4f4f4;
	}
.information{
	padding-top: 80rpx;
	.infor_attr{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 280rpx;
		height: 280rpx;
		margin-left: 100rpx;
		border-radius: 50%;
		background-color: #FFFFFF;
		.infor_attr_img{
			width: 236rpx;
			height: 236rpx;
			image{
				width: 236rpx;
				height: 236rpx;
				border-radius: 50%;
			}
		}
		.infor_add{
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			image{
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	.infor_content{
		width: 100%;
		height: 270rpx;
		background: url('../../static/image/memberCenter/bk-profil.svg') no-repeat -220rpx -150rpx;
		margin-top: -60rpx;
		padding: 130rpx 50rpx 0;
		.infor_content_title{
			color: #53586E;
			font-size: 52rpx;
		}
	}
	.infor_form{
		background-color: #fff;
		margin-top: -60rpx;
		padding:0 50rpx;
		padding-top: 60rpx;
		height: calc(100vh - 270rpx - 290rpx);
		.infor_form_item{
			padding-top: 30rpx;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #ccc;
			.infor_form_hd{
				display: flex;
				justify-content: space-between;
				.info_label{
					color: #868686;
					font-size: 24rpx;
				}
				.info_edit{
					display: flex;
					align-items: center;
					color: #3F4870;
					font-size: 24rpx;
					image{
						width: 20rpx;
						height: 20rpx;
						margin-right: 8rpx;
					}
				}
			}
			&.infor_sex{
				.infor_form_bd{
					padding: 0 20rpx;
					.radio{
						margin-right: 60rpx;
					}
				}
			}
			.infor_form_bd{
				position: relative;
				margin-top: 14rpx;
				input{
					color: #010F07;
					font-size: 24rpx;
					&.placeholder{
						color: #666;
					}
				}
				image{
					position: absolute;
					right: -10rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 160rpx;
					height: 50rpx;
				}
			}
		}
		.infor_btns{
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;
			.infor_back{
				width: 48%;
				height: 100rpx;
				border-radius: 100rpx;
				border: 1rpx solid #ccc;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #666;
			}
			.infor_save{
				width: 48%;
				height: 100rpx;
				border-radius: 100rpx;
				background-color: #2588FF;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 28rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
}
</style>